<template>
  <view class="my-container">
    <!-- 用户信息区域 -->
    <view class="user-info-section">
      <view class="avatar-container">
        <image 
          class="avatar" 
          :src="userInfo.avatar" 
          mode="aspectFill"
          @error="handleImageError"
        />
      </view>
      <view class="user-details">
        <text class="username">{{ userInfo.nickname }}</text>
        <text class="user-desc">点击登录账号</text>
      </view>
      <view class="arrow-right">
        <text class="arrow">></text>
      </view>
    </view>

    <!-- 功能菜单 -->
    <view class="menu-section">
      <view class="menu-item" @click="handleMenuClick('profile')">
        <view class="menu-icon">👤</view>
        <text class="menu-text">个人资料</text>
        <text class="menu-arrow">></text>
      </view>
      
      <view class="menu-item" @click="handleMenuClick('settings')">
        <view class="menu-icon">⚙️</view>
        <text class="menu-text">设置</text>
        <text class="menu-arrow">></text>
      </view>
      
      <view class="menu-item" @click="handleMenuClick('about')">
        <view class="menu-icon">ℹ️</view>
        <text class="menu-text">关于我们</text>
        <text class="menu-arrow">></text>
      </view>
      
      <view class="menu-item" @click="handleMenuClick('feedback')">
        <view class="menu-icon">💬</view>
        <text class="menu-text">意见反馈</text>
        <text class="menu-arrow">></text>
      </view>
    </view>

    <!-- 版本信息 -->
    <view class="version-section">
      <text class="version-text">版本 1.0.0</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'MyPage',
  data() {
    return {
      userInfo: {
        nickname: '用户昵称',
        avatar: '/static/c1.png'  // 使用项目已有的图片
      }
    }
  },
  onLoad(options) {
    console.log('我的页面加载:', options)
  },
  onShow() {
    console.log('我的页面显示')
  },
  methods: {
    handleImageError(e) {
      console.error('图片加载失败:', e)
      // 设置默认头像
      this.userInfo.avatar = '/static/c1.png'
      uni.showToast({
        title: '头像加载失败',
        icon: 'none',
        duration: 2000
      })
    },
    handleMenuClick(type) {
      console.log('点击菜单:', type)
      
      switch (type) {
        case 'profile':
          uni.showToast({
            title: '个人资料功能开发中',
            icon: 'none'
          })
          break
        case 'settings':
          uni.showToast({
            title: '设置功能开发中',
            icon: 'none'
          })
          break
        case 'about':
          uni.showToast({
            title: '关于我们功能开发中',
            icon: 'none'
          })
          break
        case 'feedback':
          uni.showToast({
            title: '意见反馈功能开发中',
            icon: 'none'
          })
          break
        default:
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/mixins.scss';

.my-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 40rpx;
}

.user-info-section {
  background-color: #ffffff;
  padding: 40rpx 32rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  
  .avatar-container {
    margin-right: 24rpx;
    
    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 60rpx;
      background-color: #f0f0f0;
    }
  }
  
  .user-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    
    .username {
      font-size: 36rpx;
      font-weight: 600;
      color: #333333;
      margin-bottom: 8rpx;
    }
    
    .user-desc {
      font-size: 28rpx;
      color: #999999;
    }
  }
  
  .arrow-right {
    .arrow {
      font-size: 32rpx;
      color: #cccccc;
    }
  }
}

.menu-section {
  background-color: #ffffff;
  margin-bottom: 20rpx;
  
  .menu-item {
    display: flex;
    align-items: center;
    padding: 32rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .menu-icon {
      font-size: 40rpx;
      margin-right: 24rpx;
      width: 40rpx;
      text-align: center;
    }
    
    .menu-text {
      flex: 1;
      font-size: 32rpx;
      color: #333333;
    }
    
    .menu-arrow {
      font-size: 28rpx;
      color: #cccccc;
    }
  }
}

.version-section {
  text-align: center;
  padding: 40rpx 0;
  
  .version-text {
    font-size: 24rpx;
    color: #999999;
  }
}
</style> 